<template>
  <div class="app-container">
    <!--  查询  -->
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline formHeight">

        <el-row :gutter="20" type="flex" justify="center">

          <el-col :span="8">
            <el-form-item label="采集器名称">
              <el-input
                v-model="formInline.collect_name"
                size="mini"
                clearable
                placeholder="请输入采集器名称"
                @change="FormChange"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="采集器编号">
              <el-input
                v-model="formInline.collect_num"
                size="mini"
                clearable
                placeholder="请输入采集器编号"
                @change="FormChange"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属企业" prop="company_id">
              <el-select v-model="formInline.company_id" placeholder="请选择" @change="FormChange" size="mini">
                <el-option
                  v-for="item in companyList"
                  :key="item.id"
                  :label="item.company_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采集器分类">
              <el-select v-model="formInline.category" placeholder="请选择" @change="FormChange" size="mini">
                <el-option label="请选择" value="" />
                <el-option
                  v-for="item in categoryList"
                  :key="item.id"
                  :label="item.cate_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="采集器状态">
              <el-select v-model="formInline.collect_status" placeholder="请选择" @change="FormChange" size="mini">
                <el-option label="请选择" value="" />
                <el-option label="上线" value="1" />
                <el-option label="下线" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item>
              <!--              <el-button type="primary" size="medium" @click="search">查询</el-button>-->
              <el-button type="primary" size="mini" @click="addOrEdit(1)">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!--  列表  -->
    <el-card class="mt20">
      <el-table
        :data="tableData"
        style="width: 100%;"
        :row-key="getRowKeys"
        :default-sort="{prop: formInline.sort, order: formInline.order}"
        :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
        @sort-change="tableSortChange"
      >
        <el-table-column
          prop="collect_num"
          label="采集器编号"

          align="center"
        />
        <el-table-column
          prop="collect_name"
          label="采集器名称"
          align="center"
        />
        <el-table-column
          prop="company"
          label="所属公司"
          align="center"
        />
        <el-table-column
          prop="cate_name"
          label="分类名称"
          align="center"
        />
        <el-table-column
          prop="address"
          label="安装地址"
          align="center"
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.collect_status == 1 " type="success"> {{ scope.row.status_name }}</el-tag>
              <el-tag v-if="scope.row.collect_status == 2 " type="danger"> {{ scope.row.status_name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="添加时间"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="250"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="mini"
              @click="addOrEdit(2, scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="del(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   分页   -->
      <div>
<!--        <el-pagination-->
<!--          background-->
<!--          class="paginationPage"-->
<!--          :page-sizes="[100, 200, 300, 400]"-->
<!--          :page-size="10"-->
<!--          :current-page="formInline.offset"-->
<!--          layout="total, prev, pager, next, jumper"-->
<!--          :total="total"-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--        />-->
        <pagination style='float: right;' v-show='total>0' :total='total' :page.sync='formInline.offset' :limit.sync='formInline.limit' @pagination='getList' />
      </div>
    </el-card>

    <div v-if="detailFlag">
      <Detail
        :id="detailId"
        :dialog-visible="detailFlag"
        :title="detailTitle"
        @close="close"
        @confirm="confirm"
      />
    </div>
  </div>
</template>

<script>
import { dataList, dataDelete, dataCategoryList, companyListData } from '@/api/collector'
import Detail from './components/detail'

export default {
  name: 'collector.category',
  components: {
    Detail
  },
  data() {
    return {
      detailTitle: '新增',
      detailFlag: false,
      detailId: 0,
      tableData: [],
      total: 0,
      // 搜索表单
      formInline: {
        sort: 'created_at',
        offset: 0,
        limit: 10,
        order: 'ascending',
        collect_name: '',
        collect_num: '',
        category: '',
        pid: 0,
        collect_status: '',
        company_id: ''
      },
      categoryList: {}
    }
  },
  created() {
    this.getList()
    this.CategoryList()
    this.dataCompanyList()
  },
  methods: {

    // 状态修改查询

    FormChange() {
      this.search()
    },

    // 分类列表
    CategoryList() {
      dataCategoryList({ pid: 1, limit: 20, offset: 1, order: 'ascending' }).then(res => {
        if (res.code == 200) {
          this.categoryList = res.data.categories
        }
      })
    },
    // 企业列表
    dataCompanyList() {
      companyListData({ pid: 1, limit: 20, offset: 1, order: 'ascending' }).then(res => {
        if (res.code == 200) {
          this.companyList = res.data.companies
        }
      })
    },
    /**
     * @description: 新增或编辑
     * @author: 书童
     * @param: 1新增，2编辑
     */
    addOrEdit(num, id) {
      if (num === 1) {
        this.detailTitle = '新增'
        this.detailFlag = true
        this.detailId = id
      } else {
        this.detailTitle = '编辑'
        this.detailId = id
        this.detailFlag = true
      }
    },
    //  获取数据参数列表
    getList() {
      dataList(this.formInline).then(res => {
        this.tableData = res.data.categories
        this.total = res.data.total
      })
    },
    //  关闭弹窗组件
    close() {
      this.detailFlag = false
      this.detailId = ''
    },
    // 弹窗返回
    confirm() {
      this.close()
      this.getList()
    },
    /**
     * @description: 排序
     * @author: 书童
     */
    tableSortChange(column) {
      this.formInline.order = column.order ? column.order : 'descending'
      this.formInline.sort = column.prop
      this.formInline.offset = 0
      this.getList()
    },
    /**
     * @description: 删除数据
     * @author: 书童
     * @param: id
     */
    del(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dataDelete({ id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        })
      })
    },
    /**
     * @description: 查询
     * @author: 书童
     */
    search() {
      this.formInline.offset = 0
      this.getList()
    },
    getRowKeys(row) {
      return row.id
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.formHeight {
  height: 50px;
}

.mt20 {
  margin-top: 20px;
}

.tHeight {
  height: calc(100vh - 350px);
  overflow: auto;
}
::v-deep.el-col{
  padding-left: 0!important;
  padding-right: 0!important;
}
</style>
